<template>
    <div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="usernameF"
                    name="账号"
                    label="账号"
                    placeholder="请输入账号"
                    :rules="[{ required: true, message: '请输入账号' }]"
            />
            <van-field
                    v-model="passwordF"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入新密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="phoneF"
                    label="手机号"
                    placeholder="请输入手机号"
            />
            <van-field
                    v-model="smsF"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
            >
                <template #button>
                    <van-button size="small" type="primary" @click="yanzhengMa()">{{flag?'发送验证码':num}}</van-button>
                </template>
            </van-field>
        </van-form>
        <van-button type="info" size="large" style="margin-top: 40px" @click="forgetpass">重置密码</van-button>
    </div>
</template>

<script>
    import {forget, testing} from "../api/api";
    import {Toast} from "vant";

    export default {
        name: "ForgetPassword",
        data(){
            return{
                usernameF:'',
                passwordF:'',
                phoneF:'',
                smsF:'',
                timer1:null,
                flag:true,
                num:60,
            }
        },
        methods: {
            onSubmit(values) {
                console.log('submit', values);
            },
            forgetpass(){
                forget(this.usernameF,this.passwordF,this.phoneF,this.smsF).then(res=>{
                    console.log(res);
                    // Toast(res.code);
                    if(res.code==0){
                        Toast("操作成功");
                        this.$router.push('/Login/Login1');
                    }
                    // console.log(res)
                })
            },
            yanzhengMa(){
                if(this.phoneF&&this.phoneF.length==11){
                    clearInterval(this.timer1)
                    this.flag=false
                    this.timer1=setInterval(()=>{
                        this.num--;
                        if(this.num==0){
                            clearInterval(this.timer1)
                            this.flag=true
                            this.num=60;

                        }
                    },1000)
                }else{
                    Toast("请输入正确手机号");
                }


                testing(this.phoneF).then((res)=>{
                    console.log(res)
                })
            }
        },
    }
</script>

<style scoped>

</style>